<div layout="row" layout-align="start center">
  <div hide-xs class="mat-subtitle-1 pad-left pad-right push-bottom-none">
    Chart Theme:
  </div>
  <mat-form-field>
    <mat-select
      [(value)]="selectedTheme"
      (valueChange)="selectChartTheme($event)"
    >
      <mat-option *ngFor="let theme of themes" [value]="theme">
        {{ theme }}
      </mat-option>
    </mat-select>
  </mat-form-field>
</div>
<td-chart [style.height.px]="300" [themeName]="themeSelector.selected$ | async">
  <td-chart-series
    td-sankey
    [focusNodeAdjacency]="'allEdges'"
    [right]="40"
    [left]="40"
    [data]="[
      { name: 'a' },
      { name: 'b' },
      { name: 'a1' },
      { name: 'a2' },
      { name: 'b1' },
      { name: 'c' }
    ]"
    [links]="[
      {
        source: 'a',
        target: 'a1',
        value: 5
      },
      {
        source: 'a',
        target: 'a2',
        value: 3
      },
      {
        source: 'b',
        target: 'b1',
        value: 8
      },
      {
        source: 'a',
        target: 'b1',
        value: 3
      },
      {
        source: 'b1',
        target: 'a1',
        value: 1
      },
      {
        source: 'b1',
        target: 'c',
        value: 2
      }
    ]"
  >
    <td-chart-tooltip [trigger]="'item'">
      <ng-template
        let-params
        let-i="index"
        let-ticket="ticket"
        tdTooltipFormatter
      >
        <ng-container *ngIf="params">
          <div layout="row" layout-align="start center">
            <ng-container *ngIf="params.dataType === 'node'">
              <mat-icon [style.color]="params.color">device_hub</mat-icon>
              <span class="mat-caption pad-left-sm">
                {{ params.data.name }}
              </span>
            </ng-container>
            <ng-container *ngIf="params.dataType === 'edge'">
              <span class="mat-caption pad-left-sm">
                {{ params.data.source }}
              </span>
              <mat-icon>arrow_forward</mat-icon>
              <span class="mat-caption"
                >{{ params.data.target }} : {{ params.value }}</span
              >
            </ng-container>
          </div>
        </ng-container>
      </ng-template>
    </td-chart-tooltip>
  </td-chart-series>
</td-chart>
